<script setup>
import { onMounted } from 'vue';

import AMapLoader from '@amap/amap-jsapi-loader';

const emits = defineEmits(['load']);
const amap = defineModel();
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: '2dee3cc4d0b55a56bab3b9a30c9e0b9e',
  };
  AMapLoader.load({
    key: 'b8477ef3105aafedf0d823c3aa1be732', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      'AMap.ToolBar',
      'AMap.Scale',
      'AMap.HawkEye',
      'AMap.MapType',
      'AMap.Geolocation',
      'AMap.ControlBar',
      'AMap.MarkerCluster',
    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      amap.value = AMap;
      emits('load');
    })
    .catch((error) => {
      console.log(error);
    });
});

// onUnmounted(() => {
//   map.value?.destroy();
// });
</script>
<template>
  <div id="amap-container"></div>
</template>
<style scoped>
#amap-container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>
